<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
	<meta charset="utf-8">
 <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">	<meta name="description" content="">
	<title>高级响应式图表</title>
	<style>
	#container {
    height: 300px;
    min-width: 310px;
    max-width: 800px;
}

	</style>
	<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
	<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<!--
*************************************************************************
    Generated by HCODE at 2017-05-05 12:25:16
    From: https://code.hcharts.cn/demos/FhVyQk
*************************************************************************
-->
<div id="container"></div>
<button id="large">设置宽度为 800px</button>
<button id="small">设置宽度为 400px</button>

	<script>
	$(function () {
    var chart = Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: '响应式图表'
        },
        subtitle: {
            text: '响应式切换位置和样式'
        },
        legend: {
            align: 'right',
            verticalAlign: 'middle',
            layout: 'vertical'
        },
        xAxis: {
            categories: ['苹果', '橘子', '香蕉'],
            labels: {
                x: -10
            }
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: '金额'
            }
        },
        series: [{
            name: '圣诞平安夜',
            data: [1, 4, 3]
        }, {
            name: '圣诞节晚餐前一天',
            data: [6, 4, 2]
        }, {
            name: '圣诞节晚餐后一天',
            data: [8, 4, 3]
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        layout: 'horizontal'
                    },
                    yAxis: {
                        labels: {
                            align: 'left',
                            x: 0,
                            y: -5
                        },
                        title: {
                            text: null
                        }
                    },
                    subtitle: {
                        text: null
                    },
                    credits: {
                        enabled: false
                    }
                }
            }]
        }
    });
    $('#small').click(function () {
        chart.setSize(400, 300);
    });
    $('#large').click(function () {
        chart.setSize(800, 300);
    });
});
</script>

</body></html>